<template>
	<view class="page-cont" :style="useTheme.theme">
		<!-- 预警统计 -->
		<view class="warn-cont">
			<view class="warn-cont-title">预警统计</view>
			<view class="warn-cont-stat">
				<view class="warn-cont-box">
					<view class="warn-cont-name">紧急报警</view>
					<view class="warn-cont-num">{{warnData.level1}}</view>
				</view>
				<view class="warn-cont-box">
					<view class="warn-cont-name">严重报警</view>
					<view class="warn-cont-num">{{warnData.level2}}</view>
				</view>
				<view class="warn-cont-box">
					<view class="warn-cont-name">普通报警</view>
					<view class="warn-cont-num">{{warnData.level3}}</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-cont" scroll-y refresher-enabled :refresher-triggered="isRefresh" @refresherrefresh="handlePullDownRefresh">
			<!-- 项目信息 -->
			<view class="project-cont">
				<view class="project-list-item" v-for="(item, index) in projectList" :key="index">
					<view class="project-list-header" @click="handleWarnList(item, index)">
						<view class="project-list-header-left">
							<view class="project-list-header-name">{{item.name}}</view>
							<view class="project-list-header-num">{{item.total}}</view>
						</view>
						<view class="project-list-header-right"></view>
					</view>
					<view class="project-list-cont" v-if="item.isOpen">
						<view class="project-list-cont-item" v-for="(childItem, childIndex) in item.childList" :key="childIndex">
							<view class="project-list-cont-top">
								<view class="project-list-cont-info">
									<view class="project-list-cont-header">
										<view :class="['project-list-cont-type', 'level' + childItem.level]">{{warnLevel[childItem.level]}}</view>
										<view :class="['project-list-cont-title', 'level' + childItem.level]">{{childItem.title}}</view>
									</view>
									<view class="project-list-cont-detail">{{childItem.analysismsg}}</view>
								</view>
								<view class="project-list-cont-btn" @click.stop="handleWarnDetail(item, childItem)">查看详情</view>
							</view>
							<view class="project-list-cont-bottom">
								<view class="project-list-cont-left">
									<view class="project-list-cont-text">报警时间：</view>
									<view class="project-list-cont-time">{{childItem.starttime}}</view>
								</view>
								<view class="project-list-cont-right">
									<view class="project-list-cont-text">持续时间：</view>
									<view class="project-list-cont-time">{{childItem.endtime}}</view>
								</view>
							</view>
						</view>
						<view v-if="page.total > 5" class="project-list-cont-more" @click="handleLoad">加载更多</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar, useDict } from "@/utils/hooks.js";
	import { getProjectList } from "@/api/home.js";
	import { getWarnList, getWarnLevel } from "@/api/warn.js";
	import useThemeStore from '@/store/theme';
	import useHomeStore from '@/store/home';
	const useTheme = useThemeStore();
	const homeStore = useHomeStore();
	const { proxy } = getCurrentInstance();
	const { pageHeight } = useNavbar();
	const { warnLevel } = useDict();
	const projectList = ref([]);
	const projectId = ref("");
	const isRefresh = ref(false)
	const page = reactive({
		pageNum: 1,
		pageSize: 5,
		total: 0,
	});
	const warnList = ref([]);
	const warnData = reactive({
		level1: 0,//紧急告警
		level2: 0,//严重告警
		level3: 0,//普通告警
	});

	onMounted(() => {
		initData()
		uni.$on("updateWarn", () => {
			initData()
		});
	});


	async function initData() {
		await getProject();
		isRefresh.value = false;
		warnData.level1 = await getLevel(0) as number;
		warnData.level2 = await getLevel(1) as number;
		warnData.level3 = await getLevel(2) as number;
		for (let i = 0, len = projectList.value.length; i < len; i++) {
			let item = projectList.value[i];
			item.total = await getWarnNum(item.id);
			item.isOpen = false; //默认：折叠
			if (i == 0) {
				projectId.value = item.id;
				item.childList = await getWarnData();
				item.isOpen = true;
			}
		}

	}

	// 获取项目列表
	function getProject() {
		return new Promise(resolve => {
			getProjectList({ isAlarm: true }).then(res => {
				projectList.value = res.data;
				homeStore.setProjectList(projectList.value);
				resolve(true);
			});
		});
	}

	// 获取告警等级
	function getLevel(status : number) {
		return new Promise(resolve => {
			getWarnLevel({ status: status }).then(res => {
				let arr = res.data || [];
				let count = 0;
				if (arr.length) {
					count = arr[0].count || 0;
				}
				resolve(count);
			});
		});
	}

	// 获取预警数量
	function getWarnNum(mid) {
		return new Promise(resolve => {
			if (!mid) {
				resolve(0);
				return;
			}
			let params = {
				pageNum: 1,
				pageSize: 1,
				status: "1",
				mids: mid
			}
			getWarnList(params).then(res => {
				let pageData = res.pageData;
				resolve(pageData.total || 0);
			});
		});
	}

	// 获取预警列表
	function getWarnData() {
		return new Promise(resolve => {
			let params = {
				pageNum: page.pageNum,
				pageSize: page.pageSize,
				status: "1",
				mids: projectId.value
			}
			getWarnList(params).then(res => {
				let pageData = res.pageData;
				let list = [];
				if (page.pageNum == 1) {
					list = pageData.list || [];
				} else {
					list = list.concat(pageData.list || []);
				}
				list.forEach(element => {
					if (element.starttime) {
						let second = proxy.dayjs().diff(element.starttime);
						element.endtime = convertSeconds(Number(second));
					}
				});
				resolve(list);
			});
		});
	}

	// 下拉刷新
	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		initData();
	}

	// 项目告警列表：展开、收起
	async function handleWarnList(item : object, index : number) {
		projectList.value.forEach((element, elementIndex) => {
			if (index == elementIndex) {
				page.pageNum = 1;
				projectId.value = element.id;
				element.isOpen = true;
			} else {
				element.isOpen = false;
			}
		});
		item["childList"] = await getWarnData();
		projectList.value.splice(index, 1, item);
	}
	// 告警详情
	function handleWarnDetail(item : object, childItem : object) {
		homeStore.setProjectId(item["id"]);
		homeStore.setProjectName(item["name"]);
		homeStore.setWarnId(childItem["id"]);
		uni.navigateTo({
			url: '/pages/warn/detail'
		});
	}

	// 加载更多
	function handleLoad() {
		page.pageNum++;
		getWarnData();
	}

	// 时间戳转换
	function convertSeconds(seconds : number) {
		seconds = seconds / 1000;
		const days = Math.floor(seconds / (24 * 3600));
		const hours = Math.floor((seconds % (24 * 3600)) / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		const secs = Math.floor(seconds % 60);
		let str = "";
		if (days) {
			str += `${days}天`;
		}
		if (hours) {
			str += `${hours}小时`;
		}
		if (minutes) {
			str += `${minutes}分`;
		}
		str += `${secs}秒`;
		return str;
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		padding: 10px;
		height: 100%;
		box-sizing: border-box;

		.warn-cont {
			padding: 10px 15px 25px;
			border-radius: 10rpx;
			background-color: $theme-color;

			.warn-cont-title {
				color: #fff;
				font-size: 14px;
			}

			.warn-cont-stat {
				padding-top: 30px;
				display: flex;
			}

			.warn-cont-box {
				flex: 1;
			}

			.warn-cont-name,
			.warn-cont-num {
				color: #fff;
				font-size: 13px;
				text-align: center;
			}

			.warn-cont-num {
				font-size: 25px;
				font-weight: 600;
			}
		}

		.scroll-cont {
			height: calc(100% - 140px);
		}

		.project-cont {
			margin-top: 10rpx;

			.project-list-item {
				margin-top: 15px;
				padding: 2rpx;
				border-radius: 5px;
				background-color: #fff;
				overflow: hidden;

				&:first-child {
					margin-top: 0;
				}

				&.isOpen {}
			}

			.project-list-header {
				padding: 12rpx 20rpx;
				display: flex;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
				background-color: #EFF1F7;
				overflow: hidden;
			}

			.project-list-header-left {
				display: flex;
				align-items: center;
			}

			.project-list-header-name {
				color: #333;
				font-size: 25rpx;
				font-weight: 600;
			}

			.project-list-header-num {
				margin-left: 10px;
				padding: 0 6px;
				height: 12px;
				line-height: 12px;
				color: #E65157;
				font-size: 11px;
				border-radius: 6px;
				background-color: rgba(230, 81, 87, 0.2);
			}

			.project-list-cont {
				padding: 10px;
			}

			.project-list-cont-item {
				margin-top: 10px;
				padding: 10px;
				border-radius: 2px;
				background-color: #F7F9FF;

				&:first-child {
					margin-top: 0;
				}
			}

			.project-list-cont-top {
				display: flex;
			}

			.project-list-cont-info {
				padding-right: 29px;
				width: calc(100% - 66px);
				box-sizing: border-box;
			}

			.project-list-cont-header {
				display: flex;
				align-items: center;
				border-radius: 4rpx;
				background-color: #EFEEFC;
			}

			.project-list-cont-btn {
				margin-top: 9px;
				width: 66px;
				min-width: 66px;
				height: 25px;
				line-height: 25px;
				color: #2C5AEE;
				font-size: 12px;
				text-align: center;
				background-color: #E6EDFF;
			}

			.project-list-cont-type {
				width: 50px;
				min-width: 50px;
				height: 18px;
				line-height: 18px;
				color: #fff;
				font-size: 11px;
				text-align: center;
				border-radius: 2px;
				background-color: #8B7BFF;

				&.level0 {
					background-color: #E65157;
				}

				&.level1 {
					background-color: #FF7900;
				}

				&.level2 {
					background-color: #8B7BFF;
				}
			}

			.project-list-cont-title {
				padding: 0 20rpx;
				width: calc(100% - 90rpx);
				color: #8B7BFF;
				font-size: 24rpx;
				font-weight: 600;

				&.level0 {
					color: #E65157;
				}

				&.level1 {
					color: #FF7900;
				}

				&.level2 {
					color: #8B7BFF;
				}
			}

			.project-list-cont-detail {
				padding-top: 7px;
				color: #333;
				font-size: 12px;
				font-weight: 600;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.project-list-cont-bottom {
				padding-top: 9px;
				display: flex;
				justify-content: space-between;
			}

			.project-list-cont-left,
			.project-list-cont-right {
				width: 50%;
				display: flex;
				color: #999;
				font-size: 12px;
			}

			.project-list-cont-text {
				color: #999;
				font-size: 12px;
				min-width: 60px;
			}

			.project-list-cont-time {
				color: #666;
				font-weight: 600;
			}

			.project-list-cont-more {
				height: 30px;
				line-height: 30px;
				color: #333;
				font-size: 12px;
				font-weight: 600;
				text-align: center;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				background-color: #EFF1F7;
			}
		}
	}
</style>